<template>
	<div
		class="goods-item"
		:class="[
			{
				'is-disabled': item.receiveStatus > 0
			}
		]"
		@click="toHref"
	>
		<!-- 排名 -->
		<div class="goods-item__rank">
			<template v-if="index < 3">
				<img :src="`https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/images/million_good_top${index + 1}.png`" />
			</template>
			<div class="goods-item__rank-index" v-else-if="index > 2 && index < 10 && tabIndex == 0">
				<span>{{ index + 1 }}</span>
			</div>
		</div>

		<!-- 封面 -->
		<div class="goods-item__cover">
			<img class="goods-item__cover-pic" :src="item.pic" lazy-load />
			<img v-if="item.quanMLink > 0" class="goods-item__cover-tag" src="@/assets/2/images/pre-sale-tag.png" />
		</div>

		<!-- 详情 -->
		<div class="goods-item__detail">
			<div class="goods-item__title">
				<span class="iconfont icon-tianmao" v-if="item.shoptype == 1"></span>
				<span class="iconfont icon-taobao2" v-else-if="item.shoptype == 0"></span>
				<span class="goods-item__title-tag" v-else-if="item.shoptype == 10">优选</span>
				<span class="goods-item__title-tag" v-else-if="item.shoptype == 11">苏宁商品</span>
				<span class="goods-item__title-tag" v-else-if="item.shoptype == 12">特惠</span>
				{{ item.title }}
			</div>

			<span class="goods-item__lave">已抢{{ item.receiveVirtualNum || 0 }}件</span>

			<div class="flex1"></div>

			<div class="goods-item__newcomer-price" v-if="item.price != -1">
				补贴价
				<span class="goods-item__newcomer-price--now">{{ item | now_price }}</span>
				<span class="goods-item__newcomer-price--original">{{ item.price }}</span>
			</div>

			<div class="goods-item__footer">
				<div class="goods-item__grab goods-item__grab--dis" v-if="item.couponId">
					<template>
						<img mode="widthFix" src="@/assets/2/images/grab-disabled-bg.png" v-if="item.receiveStatus > 0" />
						<img mode="widthFix" src="@/assets/2/images/grab-bg.png" v-else />

						<div class="goods-item__grab-price">
							<span>{{ (item.type == 0 ? item.mdMoney : item.tljMoney) || 0 }}元</span>
							<span>补贴金</span>
						</div>

						<div class="goods-item__grab-btn">
							<span>{{ item.price == -1 ? '暂不销售' : '立即抢' }}</span>
						</div>
					</template>
				</div>
				<!-- 没有优惠券时的按钮 -->
				<div v-else class="goods-item__grab-btn--dis">
					<div>立即抢</div>
				</div>
			</div>

			<!-- 已使用 -->
			<div class="goods-item__state--used" v-if="item.hasBuy == 1">
				<img src="@/assets/2/images/state-used.png" />
			</div>

			<!-- 已抢完 -->
			<div class="goods-item__state--finished" v-if="item.receiveStatus > 0">
				<span>已抢完</span>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import { Toast } from 'vant';

export default {
	props: {
		item: Object,
		index: Number,
		tabIndex: Number
	},

	filters: {
		now_price({ price, endPrice, mdMoney, tljMoney, hzQuanOver }) {
			if (price == -1) {
				return 0;
			}

			return (parseFloat(endPrice || 0) - parseFloat(mdMoney || 0) - parseFloat(tljMoney || 0) - parseFloat(hzQuanOver || 0)).toFixed(2);
		}
	},

	computed: {
		...mapGetters(['token'])
	},

	methods: {
		toHref() {
			const { couponId, id, gid } = this.item;

			this.$hmt.push('商品点击事件', '优选立即抢');

			Toast.loading({
				message: '加载中'
			});

			this.$service.common.common
				.selfmallLogin()
				.then(res => {
					Toast.clear();

					res.expires_time = moment(res.expires_time).unix();

					let url = '';

					if (couponId) {
						url = `${this.$selfUrl}/coupon?token=${res.token}&expires_time=${res.expires_time}&couponId=${couponId}&gid=${gid}&from=million`;
					} else {
						url = `${this.$selfUrl}/detail/${id}?token=${res.token}&expires_time=${res.expires_time}&from=million`;
					}

					location.href = url;
				})
				.catch(err => {
					Toast.clear();
					Toast(err.message);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
